<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>课程训练</title>
  </head>
  <body>
    <main>
      <video id="videoUrl" muted autoplay></video>
      <div class="video-intr">
        <h1><span id="curNum"></span>/<span id="totalNum"></span></h1>
        <p class="title"></p>
      </div>
    </main>
    <footer>
      <i class="iconfont icon-Prev" id="prev"></i>
      <i class="iconfont icon-pause2" id="pause"></i>
      <i class="iconfont icon-Next" id="next"></i>
      <!-- 进度条 -->
      <p class="progress" id="progress"></p>
    </footer>

    <!-- 模态框 -->
    <div class="video-modal" id="videoModal">
      <h3>放弃可以找到一万个理由,坚持只需要一个信念!</h3>

      <div class="modal-position">
        <!-- 播放结束 -->
        <div class="pasue-play">
          <button id="goOn">
            <i class="iconfont icon-play2"></i>
            <span>继续训练</span>
          </button>
          <button id="end">
            <i class="iconfont icon-close"></i>
            <span>结束训练</span>
          </button>
        </div>

        <!-- 视频的图片和文字 -->
        <div class="video-text">
          <img alt="" id="imgUrl" />
          <p>
            <span>当前:</span>
            <em class="title">----</em>
          </p>
        </div>
      </div>
    </div>
  </body>
</html>
